<template>
  <input
    class="input" :class="{
    error:!isOK
  }" :type="type" :placeholder="placeholder" @input="dataChange" 
  @blur="showTips" />
  <!-- 在每次输入变化的时候去验证这个输入框符不符合正则表达式 -->
  <!-- 输入事件是 input 绑定一个方法,每次输入都要判断数据的是否符合-->


  <!-- 绑定一个失去焦点事件,每次事件焦点时在进行验证 验证isOK的值,是 false 就弹窗提示 -->

</template>

<script>
export default {
  // 声明接受参数
  props: ["type", "placeholder", "rule", "err_message"],
  data() {
    return {
      isOK: true
    };
  },
  methods: {
    showTips(){
      // 只有当前的 isOk 值为 false 才会弹窗
      if(!this.isOK){
        alert(this.err_message)
      }
    },
    dataChange($event) {
      // console.log("数据在变化");
      if (!$event.target.value) {
        this.isOK = true;
      } else {
        //   1. 创建正则表达式
        var regex = new RegExp(this.rule);
        //   console.log(this.rule);
        //   2. 测试数据的合法性
        var isOK = regex.test($event.target.value);
        //   3.把结果储存起来
        this.isOK = regex.test($event.target.value);
      }
      // 正则判断手机号是否正确
      if (!this.isOK) {
        console.log(this.err_message);
      }
      // 每一次数据发生变化,使用事件往外传输,告诉父组件
      this.$emit("input", $event.target.value);
    }
  }
};
</script>

<style lang="less" scoped>
.input {
  width: 100%;
  height: 10.556vw;
  padding: 5.556vw;
  margin-bottom: 5.556vw;
  box-sizing: border-box;
  background: #fff;
  border: none;
  border-bottom: 1px solid #666;
  outline: none;
}
.error {
  border-color: red;
}
</style>